<template>
    <div class="course-box">
        <div class="course-head">
            <div class="head-title">课程列表</div>
            <div class="course">
                <el-button class="head-btn" type="primary" plain @click="addCourse"><i
                        class=" iconfont icon-tianjia"></i>
                    新增课程</el-button>
                <div class="option">
                    <el-input v-model="search" placeholder="请输入课程名称" class="input">
                        <template #append>
                            <el-button class="iconfont icon-sousuo3" @click="searchByTitel"></el-button>
                        </template>
                    </el-input>
                </div>
            </div>
        </div>
        <div class="course-body">
            <div v-for="(item, index) in courseData" :key="item.id">
                <div class="content">
                    <div class="content-top" @click="toClass">
                        <img :src="item.icon" alt="" class="course-img">
                        <div class="course-name">{{ item.courseName }}</div>
                    </div>
                    
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getCourseListAPI } from '@/api/api'

const courseData = ref()
const search = ref('')
onMounted(() => {
    getCourseList()
})
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        console.log(res.data.data.list);
        courseData.value = res.data.data.list
    })
}
const searchByTitel = () => { }
const addCourse = () => { }
const toClass = ()=>{
    
}


</script>

<style lang="less" scoped>
.course-box {
    padding: 0;
    margin: 15px 0px 0 0;
    background-color: #fff;
    border-radius: 15px;

    .course-head {

        // border-bottom: 1px solid rgb(247, 247, 247);
        .head-title {
            font-size: 18px;
            font-weight: 550;
            color: grey;
            padding: 15px 10px 0px 10px;
        }

        .course {
            display: flex;
            justify-content: end;
            margin: 10px 5px 0px 5px;
            font-size: small;

            .option {
                display: flex;
                margin: 10px 10px 20px 10px;

                .option-word {
                    margin-top: 2px;
                    padding: 3px 7px;
                    font-size: 14px;
                }

                .select {
                    width: 130px;
                }

                .input {
                    width: 240px;

                }
            }

            .head-btn {
                margin: 10px 15px 0 5px;
            }
        }

    }

    .course-body {
        min-height: 70vh;
        max-height: 70vh;
        overflow: scroll;
        display: flex;
        flex-wrap: wrap;
        width: 1280px;
        margin: 0px 20px;

        .content {
            // background-color:rgb(230, 227, 227);
            width: 260px;
            height: 220px;
            margin: 0 15px;
            padding-left: 20px;
            
            .course-img {
                // margin-left:20px ;
                border-radius: 15px;
            }
            .course-name {
                font-size: large;
                font-weight: 550;
                margin: 5px 0 0 5px;
            }
            .content-top:hover{
                color: #409eff;
            }
        }
    }

}
</style>